<template>
  <div class="main">
    <div class="image">
      <img :src="successImage">
    </div>
    <div class="tips">
      <p>支付成功</p>
    </div>
    <div class="small-tips">
      <p>成功支付欢迎下次光临</p>
    </div>
    <PayWrap :amount="amount"/>

    <!-- 根据类型来使用按钮 -->
    <ActionButton text="确定" class="blue-btn mt20" v-if="type == 'deposit'" @click="toMine" />
    <ActionButton text="立即使用" class="blue-btn mt10"  v-if="type == 'ticket'" @click="toTicket" />
    <ActionButton text="返回首页" class="white-btn mt10" @click="toIndex" />
  </div>
</template>

<script>
import common from '../../api/common'
import PayWrap from "@/components/deposit/PayWrap";
import ActionButton from "@/components/common/ActionButton";
import successImage from "../../assets/common/success.png";
export default {
  title: '支付成功',
  components: {
    ActionButton,
    PayWrap
  },
  data() {
    return {
      successImage,
      amount: this.$store.state.payAmount,
      type: common.getParam('payType')
    };
  },
  methods: {
    toMine() {
      this.$routerPush(this, `/pages/mine/Index`)
    },
    toTicket() {
      this.$routerPush(this, `/pages/myticket/Index`)
    },
    toIndex() {
      this.$routerPush(this, `/pages/homepage/Index`)
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 4vw;
  .image {
    img {
      width: 13vw;
      height: 13vw;
      display: block;
      margin: 0 auto;
      margin-top: 30vw;
    }
  }
  div {
      p {
          text-align: center;
      }
  }
  .tips {
      font-size: 5vw;
      margin: 3vw;
      color: #333;
  }
  .small-tips {
      color: #999;
      font-size: 3.5vw;
      margin-bottom: 15vw
  }
  .mt20 {
      margin-top: 20vw;
  }
  .mt10 {
      margin-top: 10vw;
  }
}
</style>
